<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title><spring:message code="title"></spring:message></title>
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="${webRoot}/static/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
	<link href="${webRoot}/static/global/plugins/select2/select2.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/treetable/default/jquery.treeTable.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/treetable/vsStyle/jquery.treeTable.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css" rel="stylesheet" type="text/css"/>
	<!-- END PAGE LEVEL PLUGIN STYLES -->
	<!-- BEGIN THEME STYLES -->
	<link href="${webRoot}/static/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/global/css/plugins.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/admin/layout/css/layout.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color"/>
	<link href="${webRoot}/static/admin/layout/css/custom.css" rel="stylesheet" type="text/css"/>
	<link href="${webRoot}/static/custom/common.css" rel="stylesheet" type="text/css"/>
	<!-- END THEME STYLES -->

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<!--[if lt IE 9]>
	<script src="${webRoot}/static/global/plugins/respond.min.js"></script>
	<script src="${webRoot}/static/global/plugins/excanvas.min.js"></script>
	<![endif]-->
	<script src="${webRoot}/static/global/plugins/jquery.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
	<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
	<script src="${webRoot}/static/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script src="${webRoot}/static/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery-validation/js/localization/messages_zh.js" type="text/javascript"></script>
	<script src="${webRoot}/static/custom/validate-override.js" type="text/javascript"></script>
	<script src="${webRoot}/static/custom/validate-custom.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/select2/select2.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/treetable/jquery.treeTable.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/ztree/js/jquery.ztree.core.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/ztree/js/jquery.ztree.excheck.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js" type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/echarts.common.min.js" type="text/javascript"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<script type="text/javascript">
        // 项目访问根目录
        var webRoot = '${webRoot}';
	</script>
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="${webRoot}/static/global/scripts/metronic.js" type="text/javascript"></script>
	<script src="${webRoot}/static/admin/layout/scripts/layout.js" type="text/javascript"></script>
	<script src="${webRoot}/static/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script>
	<script src="${webRoot}/static/custom/message_zh_CN.js" type="text/javascript"></script>
	<script src="${webRoot}/static/custom/common.js" type="text/javascript"></script>
	<script src="${webRoot}/static/custom/util.js" type="text/javascript"></script>
	<!-- END PAGE LEVEL SCRIPTS -->
	<script type="text/javascript">
        jQuery(document).ready(function() {
            Metronic.init(); // init metronic core componets
            Layout.init(); // init layout
            QuickSidebar.init(); // init quick sidebar
            // 首页加载
            $.ajax({
                type: 'post',
                url: webRoot+'/index/home',
                dataType: 'html',
                success: function(data){
                    $('.content-panel').html(data);
                }
            });
        });

        /*验证两次输入的密码一致*/
        function checkPassword() {
            var againPassword = $("input[name='againPassword']").val();
            var password = $("input[name='password']").val();
            if(againPassword != password){
                return false;
			}
			return true;
        }

        /**
         * 保存数据
         * @param obj 保存按钮（按钮需要在form表单中）
         */
        function register(obj){
            if($(obj).closest('form').valid()){
                if (!checkPassword()){
                    alert("密码不一致");
                    return;
				}
                $.ajax({
                    type: 'post',
                    url: webRoot+$(obj).closest('form').attr('action'),
                    data: $(obj).closest('form').serialize(),
                    dataType: 'json',
                    success: function(data){
                        if(200 == data.code){
                            window.location.href =  webRoot + '/login/login';
						}else{
                            alert(data.message);
						}
                    }
                });
            }
        }

	</script>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
<!-- BEGIN HEADER -->
<div class="page-header navbar navbar-fixed-top">
	<!-- BEGIN HEADER INNER -->
	<div class="page-header-inner">
		<!-- BEGIN LOGO -->
		<div class="page-logo">
			<div style="margin-top: 6px;">
				<span style="color: #fff;font-size: 24px;">HONG</span><span style="color: red;font-size: 24px;">SONG</span>
			</div>
			<%-- <a href="#">
				<img src="${webRoot}/static/admin/layout/img/logo.png" alt="logo" class="logo-default"/>
			</a> --%>
			<div class="menu-toggler sidebar-toggler hide">
				111111
			</div>
		</div>
		<!-- END LOGO -->
		<!-- BEGIN RESPONSIVE MENU TOGGLER -->
		<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
		</a>
		<!-- END RESPONSIVE MENU TOGGLER -->
		<!-- BEGIN TOP NAVIGATION MENU -->
		<div class="top-menu">
			<ul class="nav navbar-nav pull-right">
				<!-- BEGIN NOTIFICATION DROPDOWN -->
				<!-- END QUICK SIDEBAR TOGGLER -->
			</ul>
		</div>
		<!-- END TOP NAVIGATION MENU -->
	</div>
	<!-- END HEADER INNER -->
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
	<!-- BEGIN SIDEBAR -->
	<div class="page-sidebar-wrapper">
		<div class="page-sidebar navbar-collapse collapse">
		</div>
	</div>
	<!-- BEGIN CONTENT -->
	<div class="page-content-wrapper">
		<div class="page-content">
			<!-- BEGIN PAGE HEADER-->
			<div style="align-content: center;text-align: center;"><h3 class="page-title">注册</h3></div>

			<div class="portlet box green">
				<div class="portlet-title">
					<div class="caption">
						注册
					</div>
				</div>
				<div class="portlet-body form">
					<form id="registerForm" class="form-horizontal form-bordered" action="/login/register" method="post">
						<%--姓名--%>
						<div class="form-group">
							<label class="col-md-3 control-label">姓名:</label>
							<div class="col-md-4">
								<div class="input-icon right">
									<i class="fa"></i>
									<input type="text" name="name" class="form-control" required
										   maxlength="100" placeholder="请输入真实姓名"
										   onblur="allTrim(this);"/>
								</div>
							</div>
						</div>
						<%--用户名--%>
						<div class="form-group">
							<label class="col-md-3 control-label">用户名:</label>
							<div class="col-md-4">
								<div class="input-icon right">
									<i class="fa"></i>
									<input type="text" name="userName" class="form-control" required
										   maxlength="100" placeholder="请输入用户名"
										   onblur="allTrim(this);"/>
								</div>
							</div>
						</div>
						<%--手机号--%>
						<div class="form-group">
							<label class="col-md-3 control-label">手机号:</label>
							<div class="col-md-4">
								<div class="input-icon right">
									<i class="fa"></i>
									<input type="text" name="phone" class="form-control" required
										   maxlength="20" placeholder="请输入手机号"
										   onblur="allTrim(this);"/>
								</div>
							</div>
						</div>
						<%--密码--%>
						<div class="form-group">
							<label class="col-md-3 control-label">密码:</label>
							<div class="col-md-4">
								<div class="input-icon right">
									<i class="fa"></i>
									<input type="password" name="password" class="form-control" required
										   minlength="6" maxlength="16" placeholder="6-16个字符"/>
								</div>
							</div>
						</div>
						<%--重复密码--%>
						<div class="form-group">
							<label class="col-md-3 control-label">重复密码:</label>
							<div class="col-md-4">
								<div class="input-icon right">
									<i class="fa"></i>
									<input type="password" name="againPassword" class="form-control" required
										   minlength="6" maxlength="16" placeholder="请重复密码" onblur="checkPassword();"/>
								</div>
							</div>
						</div>
						<%--年龄--%>
						<div class="form-group">
							<label class="col-md-3 control-label">年龄:</label>
							<div class="col-md-4">
								<input type="number" name="age" class="form-control" maxlength="10"/>
							</div>
						</div>
						<%--性别--%>
						<div class="form-group">
							<label class="col-md-3 control-label">性别:</label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline">
										<input type="radio" name="sex" value="1"> 男 </label>
									<label class="radio-inline">
										<input type="radio" name="sex" value="0"> 女 </label>
									<label class="radio-inline">
										<input type="radio" name="sex" value="2" checked> 保密 </label>
								</div>
							</div>
						</div>
						<div class="form-actions">
							<div class="col-md-9 col-md-offset-3">
								<button type="button" id="userButton" class="btn btn-default" onclick="register(this)">
									保存
								</button>
								<button type="reset" class="btn btn-default">
									重置
								</button>
								<button type="button" class="btn btn-default" onclick="history.go(-1);">
									返回
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="page-footer">
	<div class="page-footer-inner">
		<spring:message code="footer"></spring:message>
	</div>
	<div class="scroll-to-top">
		<i class="icon-arrow-up"></i>
	</div>
</div>
<!-- END FOOTER -->

</body>
</html>